<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
	  xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="template">
<head>
	<meta charset="UTF-8" />
	<meta content="text/html"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<meta name="viewport" content="width=device-width,initial-scale=1"/>
    <title>车况分析</title>
    <link rel="stylesheet" href="../css/detectReport.css" />
    <link rel="stylesheet" href="../css/vehicleDetail.css" />
	<script src="../js/vehicleState.js"></script>
</head>
<body id="orange">
<div class="container">
    <div class="content">
        <div class="container-right" layout:fragment="content">
            <div class="crumbs">
                <ul>
					<li><a href="/index/home">首页</a><i class="triangle-icon"></i></li>
                    <li><a href="/myVehicle/detectReport">我的车况</a><i class="triangle-icon"></i></li>
                    <li class="active"><a href="/myVehicle/vehicleState">车况分析</a></li>
                </ul>
            </div>
            <div class="classification">
                <div class="type">
					<label class="lbl-car" th:text="#{System.myCar}"></label>
                    <ul  class="myCar">
						<li th:each="vehicle,vehicleStat : ${vehicleList}" th:data="${vehicle.plateNumber}" th:class="(${vehicleId} == ${vehicle.plateNumber})? active">
							<span th:text="${vehicle.plateNumber}"></span>
						</li>
                    </ul>
					<form id="vehicleForm" name="vehicleForm" action="/myVehicle/vehicleState" method="post">
						<input type="hidden" name="vehicleId" id="vehicleId" th:value="${vehicleId}"/>
					</form>
                </div>
            </div>
		    <div id="vehicleDetail">
				    <div class="report-title">
				         <div class="report-head">
				             <h2>车况分析</h2>
				         </div>
				     </div>
				    <div class="report-head" th:if="${reportList == null} or ${#lists.toList(reportList).size() == 0}" style="height: 500px;line-height:500px">
					   <h2>暂无数据</h2>
					</div>
				    <div class="report-info" th:unless="${reportList == null} or ${#lists.toList(reportList).size() == 0}">
						<table class="report-table">
							<tbody>
							<tr>
								<td>
									<label class="lbl-report"
										   th:text="#{detectReportDetailHtml.plateNumber} +':'"></label><label
										class="lbl-reportcon" th:text="${report.plateNumber}"></label>
								</td>
								<td>
									<label class="lbl-report"
										   th:text="#{detectReportDetailHtml.plateNumber} +':'"></label><label
										class="lbl-reportcon" th:text="${report.ownPerople}"></label>
								</td>
								<td>
									<label class="lbl-report"
										   th:text="#{detectReportDetailHtml.vehicelType} +':'"></label><label
										class="lbl-reportcon" th:text="${report.vehicelType}"></label>
								</td>
								<td>
									<label class="lbl-report"
										   th:text="#{detectReportDetailHtml.registerTime} +':'"></label><label
										class="lbl-reportcon"
										th:text="${#calendars.format(report.registerTime,'yyyy年MM月dd日')}"></label>
								</td>
							</tr>
							<tr>
								<td colspan="2">
									<label class="lbl-report"
										   th:text="#{detectReportDetailHtml.detectCompany} +':'"></label><label
										class="lbl-reportcon" th:text="${report.detectCompany}"></label>
								</td>
								<td>
									<label class="lbl-report"
										   th:text="#{detectReportDetailHtml.detectResult} +':'"></label><label
										class="lbl-reportcon" th:text="${report.detectResult}"></label>
								</td>
								<td>
									<label class="lbl-report" th:text="#{detectReportDetailHtml.detectTime} +':'"></label><label
										class="lbl-reportcon"
										th:text="${#calendars.format(report.reportTime,'yyyy年MM月dd日')}"></label>
								</td>
							</tr>
							</tbody>
						</table>
						<ul class="select-item">
							<li th:each="reportItem,reportItemStat : ${reportList}" th:data="'item' + ${reportItemStat.count}"
								th:class="(${reportItem.itemStatus} == '0')? plate_defaultok : plate_defaultng"
								th:text="${reportItemStat.count} + '、' +${reportItem.category} ">
							</li>
						</ul>
				    </div>
				    <div class="detailsub" th:unless="${reportList == null} or ${#lists.toList(reportList).size() == 0}">
				         <div class="report-detail" th:each="detail,detailStat : ${reportDetailList}"
							  th:id="'item' + ${detailStat.count}">
				              <div class="detail-item">
				                  <lable class="lbl-item" th:text="${detailStat.count} + '、' + ${detail.key}"></lable>
				              </div>
				              <div class="evaluate-list">
					            <ul class="select-detail-item" >
					                <li th:each="detailItem,detailItemStat : ${detail.value}" th:class="(${detailItemStat.count} == 1)?active" th:data="${detailStat.count}">
										<span th:text="${detailItem.itemName}" th:attr="data=${detailItem.itemStatus},data-value=${detailItem.itemValue},data-text=' 　　'+${detailItem.itemAnalyze}"></span>
									</li>
					            </ul>
					          </div>
					          <div class="evaluate-detail-group">
						            <!--检测站介绍-->
						             <div class="evaluate-detail evaluate-detail-show">
						                 <div>
						                    <label class="lbl-report">检验结果:</label><label class="lbl-reportcon"><i th:id="'suggestI' + ${detailStat.count}" th:class="(${#lists.toList(detail.value).get(0).itemStatus} == '0')?itemok-icon:itemng-icon"></i> <span th:text="${#lists.toList(detail.value).get(0).itemValue}" th:id="'suggestSpan' + ${detailStat.count}"></span></label>
						                 </div>
						                <div class="modular">
					                        <h3 class="evaluate-detail-title">专家建议：</h3>
					                        <p th:text="' 　　'+${#lists.toList(detail.value).get(0).itemAnalyze}" th:id="'suggestP' + ${detailStat.count}"></p>
					                        <div class="evaluate-detailimg">
								                <a href=""><img src="../img/guangao1.jpg" width="180px" /></a>
								                <a href=""><img src="../img/guangao2.jpg" width="180px" /></a>
								           </div>
					                     </div>
						             </div>
			                 </div>
				         </div>
				         <div class="report-detail" th:id="'item' + ${lastIndex}">
				              <div class="detail-item" th:classappend="(${#lists.toList(reportList).get(lastIndex - 1).itemStatus} != '0')? 'itemerror'">
				                  <lable class="lbl-item" th:text="${lastIndex} + '、' + ${#lists.toList(reportList).get(lastIndex - 1).category}"></lable>
				              </div>
				              <div class="evaluate-list">
					            <ul class="select-lastdetail-item">
									<li th:each="detailItem,detailItemStat : ${suggestList}" th:class="(${detailItemStat.count} == 1)?active" th:attr="data=${detailItemStat.count}">
										<span th:text="${detailItem.itemName}" ></span>
									</li>
					            </ul>
					          </div>
					          <div class="evaluate-detail-group" >
						            <!--检测站介绍-->
						             <div class="evaluate-detail last-detail" th:each="detailItem,detailItemStat : ${suggestList}" th:classappend="(${detailItemStat.count} == 1)?evaluate-detail-show" th:id="'last-detail' + ${detailItemStat.count}">
						                 <div >
											 <span th:each="lastItem,lastItemStat : ${lastList.get(detailItem.itemName)}">
												<label class="lbl-report" th:text="${lastItem.itemChildName} + ':'"></label><label class="lbl-reportcon"><i th:class="(${lastItem.itemStatus} == '0')? 'itemok-icon' : 'itemng-icon'"></i> <span th:text="${lastItem.itemParam}+${lastItem.itemValue}"></span></label>
                                             </span>
						                 </div>
						                <div class="modular">
					                        <h3 class="evaluate-detail-title">专家建议：</h3>
					                        <p th:text="${detailItem.itemAnalyze}"></p>
					                        <div class="evaluate-detailimg">
								                <a href=""><img src="../img/guangao1.jpg" width="180px" /></a>
								                <a href=""><img src="../img/guangao2.jpg" width="180px" /></a>
								           </div>
					                     </div>
						             </div>
			                 </div>
				         </div>
				   </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>